<template>
	<div class="">
		<!--		<div class="flex flex-wrap">-->
		<!--			<video-desc-card v-for="(item, index) in tableData.records" :key="index" :video="item" />-->
		<!--		</div>-->

		<div class="flex flex-wrap mb-2">
			<div
				class="border-b-2 mt-3 mr-3 pb-2 cursor-pointer"
				v-for="(item, index) in tableData.records"
				:key="index"
				@click="toDetail(item.moveId)"
			>
				<div class="h-[300px]">
					<el-image :src="item.moveVo.posterAddress" class="w-[200px] h-[350px]" fit="fill" />
				</div>
				<div class="text-center">
					{{ item.moveVo.name }}
				</div>
				<div class="text-center">
					<el-button @click.stop="deleteComtion(item.id)">取消收藏</el-button>
				</div>
			</div>
		</div>
		<div class="mt-5 mb-5">
			<el-pagination
				style="margin-bottom: 20px"
				background
				layout="prev, pager, next"
				:page-count="tableData.pages"
				v-model:current-page="tableData.page"
				@update:current-page="page"
			/>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSelfCollect, unCollection } from "@/api/collection";
import { ElMessage } from "element-plus";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
});

const route = useRoute();
const router = useRouter();

const toDetail = (id) => {
	router.push({
		path: "/detail",
		query: {
			id: id,
		},
	});
};

const deleteComtion = (id) => {
	unCollection(id).then((res) => {
		if (res.success) {
			ElMessage.success("取消成功");
		}
		page();
	});
};

const page = async () => {
	const res = await getSelfCollect(tableData.page, tableData.size);
	tableData.records = res.data.list;
	tableData.page = res.data.pageNum;
	tableData.pages = res.data.pages;
	tableData.size = res.data.pageSize;
};

onMounted(() => {
	page();
});
</script>

<style scoped></style>
